<template>
  <div>
      <div v-if="multiple_choice">
          <el-input v-model="myvalue" :style="{width: width}" ref="rptunitInput" @dblclick.native="openDialog" placeholder="请双击输入框选择报告单元"></el-input>
      </div>
      <div v-else>
          <!--disabled为true-->
          <el-select v-if="disabled" :style="{width: width}" :disabled="disabled" placeholder="请选择" ref="ddlrptunitSelect" v-model="ddlvalue">
              <el-option :key="index" :label="item.rptunitname + ' [' + item.rptunitid+']'" :value="item.rptunitid" v-for="(item,index) in seloptions">
                  <span style="float: left">{{ item.rptunitname }}</span>
                  <span style="float: right; color: #8492a6; font-size: 13px">{{item.rptunitid}}</span>
              </el-option>
          </el-select>
          <!--disabled为false-->
          <div v-else>
              <el-select v-if="targetId" :style="{width: width}" :disabled="disabled" @keyup.space.native="popbigtab" :clearable="clearable" @change="changevt" @click.native="filterclear" @dblclick.native="popbigtab" placeholder="请选择或双击开窗" ref="ddlrptunitSelect" v-model="ddlvalue" filterable @keyup.enter.native="selectBlur()">
                  <el-option :key="index" :label="item.rptunitname + ' [' + item.rptunitid+']'" :value="item.rptunitid" v-for="(item,index) in seloptions">
                      <span style="float: left">{{ item.rptunitname }}</span>
                      <span style="float: right; color: #8492a6; font-size: 13px">{{item.rptunitid}}</span>
                  </el-option>
              </el-select>
              <el-select v-else :style="{width: width}" :disabled="disabled" @keyup.space.native="popbigtab" :clearable="clearable" @change="changevt" @click.native="filterclear" @dblclick.native="popbigtab" placeholder="请选择或双击开窗" ref="ddlrptunitSelect" v-model="ddlvalue">
                  <el-option :key="index" :label="item.rptunitname + ' [' + item.rptunitid+']'" :value="item.rptunitid" v-for="(item,index) in seloptions">
                      <span style="float: left">{{ item.rptunitname }}</span>
                      <span style="float: right; color: #8492a6; font-size: 13px">{{item.rptunitid}}</span>
                  </el-option>
              </el-select>
          </div>

      </div>
      <!--弹窗选择报告单元-->
      <el-dialog v-el-drag-dialog :append-to-body="appendtobody" :close-on-click-modal="false" :visible.sync="dialogTableVisible" title="请选择报告单元" :destroy-on-close="true">
          <rm-pop-rptunit ref="pop" :beforeChange="beforeChange" :selvalue="myvalue" :pfulldata="fulldata" :multiple_choice="multiple_choice" @change="rptunitchange" @cancel="dialogTableVisible=false;" :prgno="prgno" :reporttype="reporttype"></rm-pop-rptunit>
      </el-dialog>
  </div>
</template>
<script>
// import { close } from "fs";
import { log } from "util";

export default {
  props: {
      width: { type: String, default: "200px" },
      value: [Number, String],
      disabled: { type: Boolean, default: false },
      clearable: { type: Boolean, default: true },
      defaultflag: { type: String, default: "" },
      multiple_choice: { type: Boolean, default: false },
      appendtobody: { type: Boolean, default: true },
      prgno: { type: String },
      targetId: { type: Boolean, default: true }, //设置为true时，输入报告单元自动根据输入值出现报告单元名称，设置为false,不能输入
      reporttype: { type: String }, //业务类型 10＝通用，20＝细菌，30＝图文，40=骨髓，90＝血库，50=PDF报告，60=基因报告
      beforeChange: { type: Function }
  },
  data() {
      return {
          myvalue: this.value,
          ddlvalue: this.value,
          rptunitname: "",
          fulldata: null,
          seloptions: [],
          dialogTableVisible: false
      };
  },
  watch: {
      value(newVal) {
          this.myvalue = newVal;
          this.ddlvalue = newVal;
          if (this.seloptions.length > 0) {
              if (this.defaultflag == "1") {
                  if (!this.myvalue || this.myvalue == "" || this.myvalue == "0") {
                      // console.log(" change1");
                      this.$emit("change", this.myvalue);
                      this.$emit("changeObj", {code:this.myvalue, name:'', row:''});
                      this.$emit("input", this.myvalue);
                  } else {
                      let ftmp = this.seloptions.filter(item => item.rptunitid == this.myvalue);
                      if (ftmp && ftmp.length > 0) {
                      } else {
                          this.myvalue = this.seloptions[0].rptunitid;
                          this.rptunitname = this.seloptions[0].rptunitname;
                          // console.log(" change2");
                          this.$emit("change", this.myvalue, this.rptunitname);
                          this.$emit("changeObj", {code:this.myvalue, name:this.rptunitname, row:''});
                          this.$emit("input", this.myvalue, this.rptunitname);
                      }
                  }
              }
          }
      },
      myvalue(newVal) {
          this.ddlvalue = Number(newVal);
          // console.log("this.ddlvalue = ", this.ddlvalue);
          this.$emit("input", newVal);
      }
  },
  computed: {
      myappendtobody: function() {
          return this.appendtobody;
      }
  },
  created() {
      this.loadAllData();
  },
  methods: {
      popbigtab: function(evt) {
          //如果是空格键并且是输入框
          if (evt.code == "Space" && this.multiple_choice) {
              this.$refs.ddlrptunitSelect.blur();
              this.dialogTableVisible = true;
              this.$nextTick(() => {
                  this.$refs.pop.setCurrentValue(this.myvalue);
              });
          } else {
              //如果是双击
              if (evt.type == "dblclick") {
                  this.$refs.ddlrptunitSelect.blur();
                  this.dialogTableVisible = true;
                  this.$nextTick(() => {
                      this.$refs.pop.setCurrentValue(this.myvalue);
                  });
              }
          }
      },
      changevt: async function(evt) {
          let execflag = true;
          if (typeof this.beforeChange === "function") {
              let r = await this.beforeChange(evt);
              if (!r) {
                  execflag = false;
              }
              //加上这句，去掉焦点，防止beforeChange方法里面弹窗后 下拉列表一直显示着
              this.$refs.ddlrptunitSelect.blur();
          }

          if (execflag) {
              let cData = this.fulldata.Data;
              var evtname = "";
              if (evt && evt != "0") {
                  cData = cData.filter(item => item.rptunitid === evt);
                  if (cData && cData.length > 0) {
                      evtname = cData[0].rptunitname;
                  }
              }
              this.myvalue = evt;
              this.$emit("change", evt, evtname);
              this.$emit("changeObj", {code:evt, name:evtname, row:''});
              // this.seloptions = this.fulldata.Data;
          } else {
              this.ddlvalue = this.myvalue;
          }
          // this.$refs.ddlrptunitSelect.focus();
      },
      setrptunitid(rptunitid) {
          return new Promise((s, f) => {
              this.myvalue = rptunitid;
              if (this.seloptions.length > 0) {
                  if (this.defaultflag == "1") {
                      if (!this.myvalue || this.myvalue == "" || this.myvalue == "0") {
                          this.myvalue = this.seloptions[0].rptunitid;
                          this.rptunitname = this.seloptions[0].rptunitname;
                          // console.log(" change4");
                          this.$emit("change", this.myvalue, this.rptunitname);
                          this.$emit("changeObj", {code:this.myvalue, name:this.rptunitname, row:''});
                          this.$emit("input", this.myvalue, this.rptunitname);
                      } else {
                          let ftmp = this.seloptions.find(item => item.rptunitid === this.myvalue);
                          if (ftmp) {
                          } else {
                              this.myvalue = this.seloptions[0].rptunitid;
                              this.rptunitname = this.seloptions[0].rptunitname;
                              // console.log(" change5");
                              this.$emit("change", this.myvalue, this.rptunitname);
                              this.$emit("changeObj", {code:this.myvalue, name:this.rptunitname, row:''});
                              this.$emit("input", this.myvalue, this.rptunitname);
                          }
                      }
                  }
              }
              s();
          });
      },
      loadAllData: function() {
          this.$tool
              .request({
                  url: "ucent/ddl",
                  method: "post",
                  data: {
                      action: "rptunit",
                      groupid: this.groupid,
                      prgno: this.prgno,
                      reporttype: this.reporttype,
                  }
              })
              .then(res => {
                  this.fulldata = res.RData;
                  this.seloptions = this.fulldata.Data;
                  // let rptunitname = "";
                  if (this.seloptions.length > 0) {
                      if (this.defaultflag == "1") {
                          if (this.myvalue != res.defid) {
                              if (!this.myvalue || this.myvalue == "") {
                                  this.myvalue = res.defid;
                                  let data = this.fulldata.Data.find(m => m.rptunitid == this.myvalue);
                                  // if (data) rptunitname = data.rptunitname;
                              }
                              if (!this.myvalue || this.myvalue == "") {
                                  // console.log(this.defaultflag);
                                  this.myvalue = this.seloptions[0].rptunitid;
                                  this.rptunitname = this.seloptions[0].rptunitname;
                              } else {
                                  let ftmp = this.seloptions.filter(item => item.rptunitid === this.myvalue);
                                  if (ftmp && ftmp.length > 0) {
                                      //console.log("rptunit find", this.myvalue);
                                      this.rptunitname = ftmp[0].rptunitname;
                                  } else {
                                      this.myvalue = this.seloptions[0].rptunitid;
                                      this.rptunitname = this.seloptions[0].rptunitname;
                                  }
                              }
                              // console.log(" change6");
                              this.$emit("change", this.myvalue, this.rptunitname);
                              this.$emit("changeObj", {code:this.myvalue, name:this.rptunitname, row:''});
                          }
                      }
                  }
              })
              .catch(e => {
                  console.log("erro", e);
              });
      },
      openDialog() {
          this.dialogTableVisible = true;
          this.$nextTick(() => {
              this.$refs.pop.setCurrentValue(this.myvalue);
          });
          this.seloptions = this.fulldata.Data;
      },
      filterclear() {
          this.seloptions = this.fulldata.Data;
      },
      //回车事件
      selectBlur() {
          let query = this.$refs.ddlrptunitSelect.selectedLabel;
          var re = /^[0-9]+.?[0-9]*$/;
          if (!re.test(query)) {
              //不是数字,暂时不做任何事
              if (query.indexOf("[") == -1) {
                  //如果是输入值，此时没有光标选中传空值，如果是光标选中的选项不用处理自动传递
                  // console.log(" change7");
                  this.$emit("change", "", "");
                  this.$emit("changeObj", {code:'', name:'', row:''});
              }
          } else {
              //是数字
              if (query !== "") {
                  let list = this.seloptions.find(m => m.rptunitid == query);
                  this.myvalue = Number(query);
                  this.ddlvalue = this.myvalue;
                  this.$refs.ddlrptunitSelect.blur();
                  if (!!list) {
                      this.$emit("change", query, list.rptunitname);
                      this.$emit("changeObj", {code:query, name:list.rptunitname, row:''});
                  } else {
                      this.$emit("change", query, query);
                      this.$emit("changeObj", {code:query, name:query, row:''});
                  }
              }
          }
      },
      rptunitchange(code, name) {
          this.myvalue = code;
          this.rptunitname = name;
          this.dialogTableVisible = false;
          this.$emit("change", this.myvalue, this.rptunitname);
          this.$emit("changeObj", {code:this.myvalue, name:this.rptunitname, row:''});
          if (this.multiple_choice) {
              this.$refs.rptunitInput.focus();
          }
      }
  },
  mounted() {}
};
</script>
<style scoped>
.el-aside {
  color: #333;
  border: solid #cccccc;
  border-width: 1px 0 1px 1px;
  background-color: #f5f5f5;
}
.el-menu {
  border: none;
  background-color: #f5f5f5;
}
.el-main {
  padding: 0;
}
/deep/ .emitem-nav .el-menu-item {
  height: 28px !important;
  line-height: 28px !important;
}
</style>
